<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange">
        <el-table-column prop="orderid" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名字"></el-table-column>
        <el-table-column prop="recordname" label="商品名字"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column prop="money" label="支付价格"></el-table-column>
        <el-table-column prop="province" label="省"></el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="odate" label="下单时间"></el-table-column>
          <el-table-column prop="paytime" label="支付时间"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.state==='已付款'" @click="dialogFormVisible=true;getOrder(scope.row); title='已发货'">发货</el-button>
            </template>
        </el-table-column>
      </el-table>
                <el-dialog title="状态" :visible="dialogFormVisible">
                    <el-form>
                        <el-radio v-model="radio" label="已发货"></el-radio>
<!--                        <el-radio v-model="radio" label="未发货"></el-radio>-->
<!--                        <el-radio v-model="radio" label="已发货"></el-radio>-->

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible=false">取消</el-button>
                        <el-button type="primary" @click="submits">确定</el-button>
                    </div>
                </el-dialog>

      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
  </div>
</template>

<script>
export default {
  name: 'Order',
  data() {
    return {

        radio: '发货',
      query: {
        address: '',
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
        formLabelWidth:'100px',
        formData:{},
        dialogFormVisible:false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$http.post("order/select").then(remark=>{
        // console.log(remark)
        this.$data.tableData=remark;
      })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    },
      submits(){
          if (this.$data.formData.state == '未付款'){
            this.$message.error("未付款，不能发货");
        }else {
            this.$http.post("/order/update",{'state':this.$data.radio,'orderid':this.$data.formData.orderid}).then(response=>{
                if (response.Data==true){
                    this.$message.error("修改失败");
                    this.$data.dialogFormVisible=false;
                }
                else{
                    this.$message.success("修改成功");
                    this.getData();
                    this.dialogFormVisible=false;
                }

            })
        }

      },
      getOrder(data){
          console.log(data);
          this.$data.formData=  data ;
      }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
